import React, { PureComponent } from 'react';
import { connect } from 'react-redux';

export class About extends PureComponent {
    calc() {
        console.log('123')
    }
    componentDidMount() {
        console.log('componentDidMount1',Date.now())
    }
    render() {
        const { counter, banners, value } = this.props
        console.log("🚀 ~ About ~ render ~ value:", value)
        console.log("🚀 ~ About123 ~ render ~ banners:", banners)
        return (
            <div>
                <div>About{counter}{value}</div>
                <button onClick={this.calc}>+</button>
                <ul>
                    {/* {
                        banners.map((item, index) => {
                            return <li key={index}>{item}</li>
                        })
                    } */}
                </ul>
            </div>
        );
    }

}
function fn1() { }

const mapStateToProps = (state) => {
    return {
        value:state.counter.value,
        counter: state.counter.value,
        banners: state.banners
    }
}

const mapDispatchToProps = (dispatch) => ({
    addNumber: function () {
        dispatch({ type: 'add' })
    }
})

export default connect(mapStateToProps, mapDispatchToProps)(About);